<template>
  <div>
    <div class="header">
      <div class="title">
        <el-row>
          <el-col :span="24">
            小牛积分商城
            <div class="user-info">
              <img :src="user.image" alt="头像" class="product-image" height="50px">
              <div class="user-details">
                <span>{{ user.name }}</span>
                <span>{{ user.phone }}</span>
              </div>
              <button @click="showPointsRules" class="guizhe">积分规则</button>
            </div>
            <!--            <van-search placeholder="唯本生活卫生纸"/>-->
            <van-dropdown-menu>
              <van-dropdown-item v-model="value1" :options="option1" class="fenlei" @change="onGoodsTypeChange"/>
              <!--              <van-dropdown-item v-model="value2" :options="option2" />-->
            </van-dropdown-menu>
          </el-col>
        </el-row>
      </div>
      <div class="points-section">
        <div class="available-points">可用积分{{ user.score }}</div>
        <button @click="SignIn()" class="qiandao">签到</button>
      </div>
      <van-notice-bar
        scrollable
        left-icon="volume-o"
        text="新用户请在设置页面的账号与安全设置6位交易密码。"
      />
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '70%' }">
      <!-- 关闭按钮 -->
      <div class="popup-close" @click="guanbi()">
        <el-button type="text" icon="el-icon-close" style="width: 20px"></el-button>
        <span class="popup-close-text">关闭</span>
      </div>
      <el-row>
        <span class="exchange-goods-title">规则说明</span>
        <el-col :span="24">
          <div class="qq">
            一、积分获取：<br>
            每日签到可以获得1000积分<br>
            二、积分兑换<br>
            1、积分商城全积分兑换，如无质量问题不支持退换贷。<br>
            2、积分商城全积分兑换，如无质量问题不支持退换贷。<br>
            3、积分商城全积分兑换，如无质量问题不支持退换贷。<br>
            4、积分商城全积分兑换，如无质量问题不支持退换贷。积分商城全积分兑换，如无质量问题不支持退换贷。<br>
            5、积分商城全积分兑换，如无质量问题不支持退换贷。积分商城全积分兑换，如无质量问题不支持退换贷。积分商城全积分兑换，如无质量问题不支持退换贷。<br>
            <van-button type="primary" size="small" @click="guanbi()">我知道了</van-button>
          </div>
        </el-col>
      </el-row>
    </van-popup>
    <!--    商品展示-->
    <div class="da">
      <div class="zuo">
        <div class="product-item" v-for="product in products.slice(0, Math.ceil(products.length / 2))"
             :key="product.id">
          <img :src="product.image" alt="img" width="180px" height="180px">
          <div class="product-info">
            <span class="product-name">{{ product.name }}</span><br>
            <span class="product-sold">已兑{{ product.nums }}件</span><br>
            <span class="product-points">{{ product.score }}积分<van-button type="primary" size="small"
                                                                            @click="exchange(product)">兑换</van-button></span>
          </div>
        </div>
      </div>
      <div class="you">
        <div class="product-item" v-for="product in products.slice(Math.ceil(products.length / 2))"
             :key="product.id">
          <img :src="product.image" alt="img" width="180px" height="180px">
          <div class="product-info">
            <span class="product-name">{{ product.name }}</span><br>
            <span class="product-sold">已兑{{ product.nums }}件</span><br>
            <span class="product-points">{{ product.score }}积分<van-button type="primary" size="small"
                                                                            @click="exchange(product)">兑换</van-button></span>
          </div>
        </div>
      </div>
    </div>
    <div class="gd">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" to="/show">积分商城</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="myShow">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      typeList: [
        {name: '', id: 0},
      ],
      active: 0,
      products: [],
      goodsList: {},
      user: {},
      show: false,
      userId: '',
      activeTab: 'recommend',
      value1: 0,
      option1: [
        {text: '全部商品', value: 0},
      ],
    };
  },
  methods: {
    //查找类型
    findType() {
      axios.post("/goods/good/findType").then(res => {
        //循环遍历
        res.data.data.typeList.forEach(item => {
          this.option1.push({
            text: item.name,
            value: item.id
          })
        })
      })
    },
    //查询全部商品
    findGoods(type) {
      let url = "/goods/good/findGoods";
      if (type) {
        url = `/goods/good/findGoodsByType?tid=${type}`;
      }
      axios.post(url).then(res => {
        this.products = res.data.data.goodsList;
      });
    },
    onLoad() {
      // 模拟加载更多订单，这里可以实际请求接口获取更多数据
      setTimeout(() => {
        this.loading = false;
        if (this.displayedOrders.length >= this.allOrders.length) {
          this.finished = true;
        }
      }, 1000);
    },
    //签到按钮
    SignIn() {
      axios.post("/user/user/signIn?id=" + this.userId).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message)
          this.findUserById()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },

    guanbi() {
      this.show = false
    },
    showPointsRules() {
      this.show = true;
      // 这里添加显示积分规则的逻辑
      console.log('显示积分规则');
    },
    exchange(product) {
      console.log("id=" + product.id)
      axios.post("goods/good/findGoodsById?id=" + product.id).then(res => {
        //把查到的数据传到详情页
        this.goodsList = res.data.data.goods
        localStorage.setItem('goodsXq', JSON.stringify(this.goodsList))
        this.$router.push({path: '/xq'})
      })
    },
    findUserById() {
      axios.post(`/user/user/findById?id=${this.userId}`).then(res => {
        this.user = res.data.data;
      })
    },
    onGoodsTypeChange(value) {
      this.findGoods(value);
    },
  },
  mounted() {
    this.findGoods()
    var user = localStorage.getItem('user');
    if (user) {
      this.from = JSON.parse(user);
      this.userId = this.from.id;
      console.log("uid=", this.userId);
    }
    this.findUserById()
    this.findType()
    this.onGoodsTypeChange()
  }
};
</script>

<style>
.fenlei {
  color: red;
}

.kapian {
  color: #555353;
  font-size: 13px;
}

.gd {
  width: 100%;
  position: fixed;
  height: 50px;
}

.da {
  width: 100%;
  //height: 300px;
  font-size: 14px;
}

.zuo {
  width: 200px;
  height: 290px;
  float: left;
}

.you {
  width: 200px;
  height: 280px;
  float: right;
}

.header {
  background-color: #FF4D4F;
  color: white;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

.title {
  font-size: 18px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-details {
  display: flex;
  flex-direction: column;
  margin-left: 35px;
  margin-right: 120px;
}

.points-section {
  background-color: #e1dc7d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.qiandao {
  width: 80px;
  height: 32px;
  border: 1px solid rgb(98, 220, 120);
  background-color: #e45a5a;
  margin-left: 10px;
}

.guizhe {
  background-color: #FF4D4F;
  border: 1px solid chartreuse;
  height: 32px;
  width: 110px;
  float: right;
  color: white;
}

.available-points {
  font-size: 14px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.product-item {
  height: 300px;
  margin-bottom: 15px;
  padding: 14px;
}
.category-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f462ed;
  padding: 5px;
}
.sou {
  width: 60px;
}
.product-info {
  text-align: left;
}
</style>
